<template>
	<view class="bc-home">
		<!-- 搜索 -->
		<view class="home-search" @click="toSearch">
			<uv-input :customStyle="{'background-color':'white'}" readonly shape="circle" placeholder="搜索"
				suffixIcon="search" suffixIconStyle="color: #909399"></uv-input>
		</view>
		<!-- 轮播图 -->
		<!-- <view style="padding: 30rpx;">
			<uv-swiper circular radius="0" indicator indicatorMode="dot" :list="swipers"></uv-swiper>
		</view> -->
		<view style="background-color: #eee;height: 20rpx;"></view>
		<!-- <uv-swiper circular radius="0" indicator indicatorMode="dot" :list="swipers"></uv-swiper> -->
		<view class="home-body">
			<!-- 选项 -->
			<!-- <view style="width:30%;margin: auto;"></view> -->
			<uv-tabs :list="tabs" lineColor="#282828" lineWidth="80rpx" :scrollable="false" @click="tabChange"></uv-tabs>
			<uv-line></uv-line>
			<!-- 推荐 -->
			<uv-list @scrolltolower="scrolltolower">
				<uv-list-item v-for="item in datas">
					<!-- 头部内容 -->
					<view class="body-photograph-header">
						<view class="photograph-header-left" @click="toUser(item.appUserId)">
							<uv-avatar class="avatar" size="64rpx" :src="api.FileById+item.appUserAvatar"></uv-avatar>
							<span class="nickName">&nbsp;{{item.appUserNickName}}</span>
						</view>
						<view class="follow" @click="follow(item.appUserId)" v-if="!userStore.followers.includes(item.appUserId)">关注</view>
						<view class="isFollow" @click="unFollow(item.appUserId)" v-else>已关注</view>
					</view>
					<!-- 图片 -->
					<view class="body-photograph-image">
						<!-- <uv-album :urls="item.files" keyName="url" multipleSize="244rpx" space="8rpx"></uv-album> -->
						<uv-image :customStyle="{'margin-bottom':'8rpx;'}" v-for="file in item.files" :src="file.url"
							:width="file.width" :height="file.height"></uv-image>
					</view>
					<!-- 名称与详情 -->
					<view class="body-photograph-content" @click="toDetail(item.id)">
						<p class="content-name">{{item.name}}</p>
						<uv-text :text="item.description"></uv-text>
					</view>
					<!-- 标签 -->
					<view class="body-photograph-tags">
						<uv-tags v-for="tag in item.tagList" borderColor="white" :text="'#'+tag" plain size="mini"
							type="primary"></uv-tags>
					</view>
					<!-- 底部内容 -->
					<view class="body-photograph-bottom">
						<!-- 左边热度 -->
						<view class="heat-content" @click="toDetail(item.id)">
							<view class="heat-left">
								<view class="heat-icon">
									<uv-icon name="eye-fill" color="#f29f52" size="32rpx"></uv-icon>
								</view>
							</view>
							<view class="heat-right">
								<span
									class="heat-value">{{item.watchCount>1000?(item.watchCount/1000).toFixed(1)+'k':item.watchCount}}</span>
							</view>
						</view>
						<!-- 右边按钮 -->
						<view class="button-content">
							<view class="button-item">
								<uv-icon v-if="item.isLiked" color='#e43d30' name="heart-fill" size="52rpx"></uv-icon>
								<uv-icon v-else name="heart" size="52rpx"></uv-icon>
								{{item.likeCount>1000?(item.likeCount/1000).toFixed(1)+'k':item.likeCount}}
							</view>
							<view class="button-item">
								<uv-icon name="star-fill" size="52rpx" v-if="item.isStar" color="#efc24e"></uv-icon>
								<uv-icon name="star" size="52rpx"
									v-else></uv-icon>{{item.starCount>1000?(item.starCount/1000).toFixed(1)+'k':item.starCount}}
							</view>
							<!-- <view class="button-item">
								<uv-icon name="chat"
									size="52rpx"></uv-icon>{{item.starCount>1000?(item.starCount/1000).toFixed(1)+'k':item.starCount}}
							</view> -->
						</view>
					</view>
					<!-- haha -->
					<view style="background-color: #eee;height: 20rpx;"></view>
				</uv-list-item>
			</uv-list>
			<c-tabbar></c-tabbar>
		</view>

		<view class="home-release" @click="toRelease">
			<uv-icon name="plus" color="#efc24e" size="46rpx"></uv-icon>
		</view>

	</view>
</template>

<script setup>
	import {
		useLayouterStore
	} from '@/stores/layouter.js'
	const layoutStore = useLayouterStore()
	import { useUserStore } from '../../stores/user.js'
	const userStore = useUserStore()
	import api from './api.js'
	import {
		ref,
		onMounted
	} from 'vue'
	const searchValue = ref({
		pageIndex: 1,
		pageSize: 10
	})
	const datas = ref([])
	const swipers = ref([
		'https://cdn.uviewui.com/uview/swiper/swiper1.png',
		'https://cdn.uviewui.com/uview/swiper/swiper2.png',
		'https://cdn.uviewui.com/uview/swiper/swiper3.png',
	])
	//选项卡
	const tabs = ref([{
		name: "作品"
	},{
		name: "关注"
	} ])
	const tabIndex = ref(0)
	const tabChange =(e)=>{
		console.log(e.index);
		tabIndex.value = e.index
		if(e.index == 1){
			getPhotographByFollow()
		}else{
			getPhotographs()
		}
	}
	const getPhotographByFollow = ()=>{
		api.getPhotographByFollow().then(res=>{
			datas.value = res.datas
			make()
		})
	}
	import { onShow } from '@dcloudio/uni-app'
	onShow(() => {
	  console.log('触发页面显示刷新')
	  tabChange(tabIndex.value)
	})
	
	const toRelease = () => {
		uni.navigateTo({
			url: './release'
		})
	}
	onMounted(() => {
		getPhotographs()
	})

	const toDetail = (id) => {
		uni.navigateTo({
			url: '/pages/home/detail?id=' + id
		})
	}
	
	const toUser = (id)=>{
		uni.navigateTo({
			url:'/pages/person/userPage?id='+id
		})
	}
	
	const unFollow = (userId)=>{
		api.unFollow(userId).then(res=>{
			userStore.unFollow(userId)
		})
	}

	const follow = (userId) => {
		api.follow(userId).then(res=>{
			console.log(res);
			userStore.addFollow(userId)
		})
		console.log(userId);
	}
	const setSize = (list, index, width, height) => {
		list[index].width = width
		list[index].height = height
	}

	const getPhotographs = () => {
		api.getPhotograph(searchValue.value).then(res => {
			if (res == '')
				return
			datas.value = res.datas
			make()
			
			console.log(datas.value);
		})
	}
	const scrolltolower = () => {
		searchValue.value.pageIndex += 1
		getPhotographs()
	}
	
	const make = ()=>{
		datas.value.forEach(item => {
			if (item.tags) {
				item.tagList = item.tags.split(",")
			} else {
				item.tagList = []
			}
			if (item.filesIds) {
				item.files = item.filesIds.split(",").map(id => ({
					width: "224rpx",
					url: api.FileById + id,
					height: "224rpx",
					id: id
				}));
				if (item.files.length == 8 || item.files.length == 5 || item.files.length == 2) {
					setSize(item.files, 0, '338rpx', '338rpx')
					setSize(item.files, 1, '338rpx', '338rpx')
				} else if (item.files.length == 1 || item.files.length == 3 || item.files.length ==
					4 || item.files.length == 7) {
					api.getDimensionsById(item.files[0].id).then(res => {
						let size = res.split(",")
						let t = size[0] / 686
						setSize(item.files, 0, '686rpx', size[1] / t + 'rpx')
						if (item.files.length == 1 || item.files.length == 4 || item.files
							.length == 7) {
							return
						}
						setSize(item.files, 1, '338rpx', '338rpx')
						setSize(item.files, 2, '338rpx', '338rpx')
						console.log(res);
					})
				}
		
			} else {
				item.files = [];
			}
			console.log(item.file);
			})
	}



	// console.log(layoutStore.someState)

	const toSearch = () => {
		uni.navigateTo({
			url:'/pages/home/search'
		})
	}
</script>

<style lang="scss">
	.bc-home {
		// background-color: #eeeeee;
		height: 100vh;

		.home-release {
			width: 46rpx;
			height: 46rpx;
			border-radius: 50%;
			background-color: #333333;
			position: fixed;
			bottom: 200rpx;
			right: 40rpx;
			padding: 17rpx;
		}

		.home-search {
			width: 95%;
			margin: 0 auto 10rpx auto;
			padding-top: 10rpx;
		}

		.home-body {
			margin-top: 20rpx;
			background-color: white;

			// height: 100%;
			.body-photograph-header {
				height: 50rpx;
				padding: 32rpx;
				display: flex;
				justify-content: space-between;

				// position: relative;

				.photograph-header-left {
					display: flex;
					justify-content: left;
					width: 80%;
					gap:20rpx;
					.nickName {
						// position: absolute;
						// top:30rpx;
						// left:90rpx;
						font-size: 28rpx;
						height: 64rpx;
						line-height: 64rpx;
					}
				}

				.follow {
					width: 128rpx;
					height: 50rpx;

					border-radius: 30rpx;
					background-color: #f8c950;
					font-size: 28rpx;
					text-align: center;
					line-height: 50rpx;
				}
				.isFollow{
					width: 128rpx;
					height: 50rpx;
					border-radius: 30rpx;
					background-color: #2c313c;
					font-size: 28rpx;
					text-align: center;
					line-height: 50rpx;
					color: white;
				}

			}

			.body-photograph-image {
				display: flex;
				justify-content: space-between;
				width: 686rpx;
				flex-flow: wrap;
				padding: 0 32rpx;
				border-radius: 20rpx;
			}

			.body-photograph-content {
				padding: 24rpx 32rpx 18rpx 32rpx;

				.content-name {
					font-size: 36rpx;
					font-weight: bold;
					margin-bottom: 6rpx;
				}
			}

			.body-photograph-tags {
				padding: 0 32rpx;
				width: 686rpx;
				display: flex;
				ustify-content: flex-start;
				overflow-x: auto;
				white-space: nowrap;
			}

			.body-photograph-bottom {
				padding: 32rpx;
				height: 56rpx;
				display: flex;
				justify-content: space-between;

				.heat-content {
					display: flex;
					background-color: #ffe9b0;
					height: 56rpx;
					width: 180rpx;
					border-radius: 10rpx;
					padding: 0;

					.heat-left {
						width: 40rpx;
						border-left: 10rpx solid #52515b;
						border-bottom: 56rpx solid #52515b;
						border-right: 20rpx solid transparent;
						border-top-left-radius: 10rpx;
						;
						border-bottom-left-radius: 10rpx;
						;
						position: relative;

						.heat-icon {
							position: absolute;
							top: 12rpx;
							left: 4rpx;
						}
					}

					.heat-right {
						height: 56rpx;
						line-height: 56rpx;
						font-size: 28rpx;
						text-align: center;
						width: 100rpx;
						// border-bottom: ;
					}
				}

				.button-content {
					display: flex;
					justify-content: space-between;
					height: 56rpx;
					line-height: 56rpx;

					.button-item {
						display: flex;
						width: 126rpx;
					}
				}

			}
		}
	}
</style>